export const addSearch = (editor) =>{
 // ------------------------------------------------------------------------------------------------------------ 
    /*
      搜索栏组件
      点击搜索框会有动态效果
      内置方法能够点击历史搜索并将对应值填入搜索框中
      输入内容并点击搜索图标提示搜索内容，并将搜索内容保存至历史记录中
      点击清空按钮，并点击确定，会清空搜索历史记录
    */
      editor.Components.addType('search', {
        model: {
          defaults: {
            script() {
              const that = this
              // 元素监听-搜索框获取焦点事件
              var th = document.getElementById(this.attributes.id.value);
              console.log(this.attributes)
              console.log('---------------------------------------------------------')
              console.log('this.attributes.id.value:' + this.attributes.id.value)
              th.getElementsByClassName('search-input-focus')[0].onfocus = function () {
                var ch = th.getElementsByClassName("search-input")[0]
                var searchInput = th.getElementsByClassName("search-input-focus")[0]
                var searchHistory = th.getElementsByClassName("search-history")[0]
                searchInput.style.width = '80%'
                ch.style.width = '100%'
                ch.style.borderRadius = "20px";
                searchInput.style.borderRadius = "20px";
                ch.style.flexDirection = 'row-reverse';
                searchHistory.style.height = '100px';
                searchHistory.style.backgroundColor = 'white';
                searchHistory.style.boder = '1px solid lightgray';
                searchHistory.style.display = 'inherit';
              }
              // 搜索框失去焦点事件
              th.getElementsByClassName('search-outer')[0].onmouseleave = function () {
                var ch = th.getElementsByClassName("search-input")[0]
                var searchInput = th.getElementsByClassName("search-input-focus")[0]
                var searchHistory = th.getElementsByClassName("search-history")[0]
                searchInput.style.width = '95%'
                ch.style.width = '50%'
                ch.style.borderRadius = "0px";
                searchInput.style.borderRadius = "0px";
                ch.style.flexDirection = 'row';
                searchHistory.style.display = 'none';
              }
  
              th.getElementsByClassName('search-img')[0].onclick = function () {
                var searchInput = th.getElementsByClassName("search-input-focus")[0]
                if (!searchInput.value) alert("请输入搜索内容！")
                else {
                  alert('搜索内容为' + searchInput.value)
                  var inner = th.getElementsByClassName('search-history-content')[0];
                  var test = document.createElement('div');
                  test.innerText = searchInput.value;
                  inner.appendChild(test);
                }
              };
              th.getElementsByClassName('search-clear')[0].onclick = function () {
                var r = confirm("是否确认清空搜索历史!");
                if (r == true) {
                  var inner = th.getElementsByClassName('search-history-content')[0];
                  inner.innerHTML = ''
                }
              };
              var searchInput = th.getElementsByClassName("search-input-focus")[0]
              var searchItem = th.getElementsByClassName('search-history-content')[0].getElementsByTagName("div");
              for (var i = 0; i < searchItem.length; i++) {
                // 对每个div元素进行操作，例如：  
                searchItem[i].onclick = function () {
                  searchInput.value = this.textContent
                }
              }
            },
            styles:
              '.search-history{\
                  width: 100%;\
                  transition: 1s;\
                  display: none;\
                  padding: 20px;\
              }\
              .search-history-tip{\
                  display: flex;\
                  justify-content: space-between;\
                  font-size: 18px;\
                  width: 100%;\
                  color:black;\
              }\
              .search-history-content{\
                  margin-top: 1%;\
                  width: 100%;\
                  height: 80%;\
                  display: flex;\
              }\
              .search-history-content>div{\
                  margin-right:1%;\
                  font-size: 13px;\
                  color: rgb(153, 153, 153);\
                  display: flex;\
                  align-items: center;\
                  justify-content: center;\
                  width: 8%;\
                  height: 50%;\
                  background-color: #f4f4f5;\
                  border: 1px solid #dedfe0;\
                  border-radius: 5px;\
              }\
              .search-history-content>div:hover{\
                  color: black;\
              }\
              .search-input {\
                  width: 50%;\
                  height: 40px;\
                  display: flex;\
                  background-color: white;\
                  border: 1px solid lightgray;\
                  align-items: center;\
                  justify-content: space-between;\
                  transition: 1s;\
              }\
              .search-input>img {\
                  margin-left: 10px;\
                  margin-right: 10px;\
                  width: 30px;\
                  height: 30px;\
                  transition: 1s;\
              }\
              .search-input>input {\
                  height: 95%;\
                  width:95%;\
                  border: none;\
                  outline: none;\
                  margin-left: 5px;\
                  margin-right: 5px;\
                  transition: 1.5s;\
              }'
          }
        }
      });
      // 搜索栏视图，未使用
      const comp = editor.DomComponents.getType('search').view.extend({
        events: {
        },
      });
      // 注册搜索栏组件
      editor.Blocks.add('searchBlock', {
        label: '搜索栏',
        // attributes: { class: 'fa fa-text' },
        category: '其他类',
        content: {
          type: 'search', content: '<div class="search-outer"><div class="search-input" style="width: 50%;height: 40px;display: flex;background-color: white;border: 1px solid lightgray;align-items: center;justify-content: space-between;transition: 1s;" tabindex="1">\
              <img class="search-img"\
                  src="https://ts1.cn.mm.bing.net/th/id/R-C.bf5e6bcabaaa8143e41ce10c63d5bd79?rik=fEgSv7W2WL%2bhbg&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f170119%2f1-1F1191335510-L.png&ehk=UGOqdbbRrVRodnBwCyG7i7dgq3%2b2pmT6OpqYL3u%2bjBA%3d&risl=&pid=ImgRaw&r=0" />\
              <input type="text" placeholder="请输入搜索关键字" class="search-input-focus" />\
              </div>\
              <div class="search-history" style="width: 100%;transition: 1s;display: none;padding: 20px;">\
                  <div class="search-history-tip" style=" display: flex;justify-content: space-between;font-size: 18px;width: 100%;color:black;">\
                  <div>搜索历史</div><div class="search-clear" style="font-size: 12px;">清除</div></div>\
                  <div class="search-history-content" style="margin-top: 1%;width: 100%;height: 80%;display: flex;">\
                      <div>test1</div>\
                      <div>test2</div>\
                  </div>\
              </div></div>'},
      });
}